<template>
  <div class="nScore scrollY">
    <Title label="指标体系" />
    <ul class="scoreData">
      <!-- 一级指标 -->
      <li
        class="scoreDataItem"
        :class="{s:index===0}"
        v-for="(item, index) in scoreData"
        :key="index"
        :style="{ background: item.backgroundColor }"
      >
        <ul class="scoreUl" >
          <li class="subItem"  v-for="(subItem, subIndex) in item.data" :key="subIndex" :style="{width:subItem.width}">
            <template v-if="subItem.label">
              <div>
                <span class="label"
                  >{{ subItem.label }}
               </span>
                <span class="characteristic">{{ subItem.characteristic }}</span>
              </div>
            </template>
            <template v-else>
              <ul style="height: 100%" class="vItem">
                <!-- 三级指标 -->
                <li
                  :style="{ height: subItem.height || vItem.height,background:vItem.max && '#fff',width:subItem.width }"
                  style="font-size:15px;border-right:0;padding:0 10px;"
                  v-for="(vItem, vIndex) in subItem.children"
                  :key="vIndex"
                >
                  <template v-if="vItem.label">
                    <span
                      >{{ vItem.label }}
                     </span>
                  </template>
                </li>
              </ul>
            </template>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import Title from "@/components/Title.vue";
import Background from "../videoMake/Background.vue";
import { ref } from "vue";
const scoreData = ref([
  {
    label: "指标",
    backgroundColor: "#fff",
    data: [
      {
        label: "一级指标",
        width:'100px'
      },
      {
        label: "指标说明",
        width:'100px'
      },
      {
        label: "指标权重",
        width:'100px'
      },
      {
        label: "二级指标",
        width:'100px'
      },
      {
        label: "指标权重",
        width:'100px'
      },
      {
        label: "三级指标",
        width:'100px'
      },
      {
        label: "评分标准",
        width:'300px'
      },
      {
        label: "指标权重",
        width:'100px'
      },
      {
        label: "评分细则",
        width:'300px'
      },
    ],
  },
  {
    label: "合规属性",
    backgroundColor: "#86B8FE",
    data: [
      {
        label: "合规属性",
        characteristic: "(合规)",
        width:'100px',
        height: "80px",
      },
      {
        label: "数据符合法律法规、规章制度和各类标准的程度",
        width:'100px',
        height: "80px",
      },
      {
        label: "15%",
        width:'100px',
        height: "80px",
      },
      {
        width:'100px',
        children: [
          {
            label: "规范性",
            height: "240px",
          },
          {
            label: "安全性",
            height: "160px",
          },
        ],
      },
      {
        width:'100px',
        children: [
          {
            label: "9%",
            height: "240px",
          },
          {
            label: "6%",
            height: "160px",
          },
        ],
      },
      {
        width:'100px',
        height: "80px",
        children: [
          {
            label: "法律法规",
            notes: "数据集符合国家安全、个人隐私、商业机密等相关法律法规的度量",
            height: "20%",
          },
          {
            label: "数据授权",
            notes: "数据集使用中是否获得授权与许可",
            height: "20%",
          },
          {
            label: "数据伦理",
            notes: "数据集是否包含歧视或者偏见信息",
            height: "20%",
          },
          {
            label: "安全制度",
            notes: "数据符合隐私保护、风险评估、安全控制、应急处置和安全审查等相关制度的度量",
            height: "20%",
          },
          {
            label: "安全控制",
            notes: "数据加密、数据备份、访问控制等安全控制技术的采用",
            height: "20%",
          },
        ],
      },
      {
        width:'300px',
        height: "80px",
        children: [
          {
            label: "数据集符合国家安全、个人隐私、商业机密等相关法律法规的度量",
            height: "20%",
          },
          {
            label: "数据集使用中是否获得授权与许可",
            height: "20%",
          },
          {
            label: "数据集是否包含歧视或者偏见信息",
            height: "20%",
          },
          {
            label: "数据符合隐私保护、风险评估、安全控制、应急处置和安全审查等相关制度的度量",
            height: "20%",
          },
          {
            label: "数据加密、数据备份、访问控制等安全控制技术的采用",
            height: "20%",
          },
        ],
      },
      {
        width:'100px',
        height: "80px",
        children: [
          {
            label: "3%",
            height: "20%",
          },
          {
            label: "3%",
            height: "20%",
          },
          {
            label: "3%",
            height: "20%",
          },
          {
            label: "3%",
            height: "20%",
          },
          {
            label: "3%",
            height: "20%",
          },
        ],
      },
      {
        width:'300px',
        height: "80px",
            children: [
          {
            label:'有法律依据1分，若无0分',
            height: "80px",
          },
          {
            label:'获得授权许可1分，如无0分',
            height: "80px",
          },
          {
            label:'不包含歧视信息或者偏见信息1分，若有0分',
            height: "80px",
          },
          {
            label:'专家依据经验对是否符合数据安全制度进行打分',
            height: "80px",
          },
          {
            label:'专家依据经验对是否采用安全控制进行打分',
            height: "80px",
          },
        ],
      },
    ],
  },
  {
    label: "内容属性",
    backgroundColor: "#E9F9D8",
    data: [
      {
        label: "内容属性",
        notes: "数据记录所呈现的信息存在错误或异常的程度",
        characteristic: "(质优)",
        width:'100px',
        height: "80px",
      },
      {
        label: "数据记录所呈现的信息存在错误或异常的程度",
        width:'100px',
        height: "80px",
      },
      {
        label: "35%",
        width:'100px',
        height: "80px",
      },
      {
        width:'100px',
        children: [
          {
            label: "准确性",
            height: "240px",
          },
          {
            label: "一致性",
            height: "240px",
          },
          {
            label: "时效性",
            height: "240px",
          },
          {
            label: "完整性",
            height: "320px",
          },
        ],
      },
      {
        width:'100px',
        children: [
          {
            label: "15%",
            height: "240px",
          },
          {
            label: "5%",
            height: "240px",
          },
          {
            label: "5%",
            height: "240px",
          },
          {
            label: "10%",
            height: "320px",
          },
        ],
      },
      {
        width:'100px',
        height: "80px",
        children: [
          {
            label: "数据内容",
            height: "7.69%",
          },
          {
            label: "数据格式",
            height: "7.69%",
          },
          {
            label: "数据来源",
            height: "7.69%",
          },
          {
            label: "格式一致性",
            height: "7.69%",
          },
          {
            label: "标注一致性",
            height: "7.69%",
          },
          {
            label: "语义一致性",
            height: "7.69%",
          },
          {
            label: "数据延迟",
            height: "7.69%",
          },
          {
            label: "数据更新频率",
            height: "7.69%",
          },
          {
            label: "数据有效期",
            height: "7.69%",
          },
          {
            label: "数据空值率",
            height: "7.69%",
          },
          {
            label: "数据重复率",
            height: "7.69%",
          },
          {
            label: "字段完整性",
            height: "7.69%",
          },
          {
            label: "记录完整性",
            height: "7.69%",
          },
        ],
      },
      {
        width:'300px',
        height: "80px",
        children: [
          {
            label: "数据内容是否符合预期",
            height: "7.69%",
          },
          {
            label: "数据格式是否符合规范要求",
            height: "7.69%",
          },
          {
            label: "数据来源的权威程度",
            height: "7.69%",
          },
          {
            label: "数据集在存储和传输中格式是否保持一致",
            height: "7.69%",
          },
          {
            label: "数据是否保持多位标注者标注一致",
            height: "7.69%",
          },
          {
            label: "数据的定义或内涵在不同阶段和系统中是否保持一致",
            height: "7.69%",
          },
          {
            label: "数据被刷新或者更新的延迟时间",
            height: "7.69%",
          },
          {
            label: "一段时间内的数据实际更新次数",
            height: "7.69%",
          },
          {
            label: "数据生成后是否保持在有效的时间范围内",
            height: "7.69%",
          },
          {
            label: "数据集是否存在空值",
            height: "7.69%",
          },
          {
            label: "数据集是否存在重复数据",
            height: "7.69%",
          },
          {
            label: "数据集中各个字段是否都被正确赋值，没有遗漏",
            height: "7.69%",
          },
          {
            label: "数据集中每条记录是否都包含所有必要的字段",
            height: "7.69%",
          },
        ],
      },
      {
        width:'100px',
        height: "80px",
        children: [
          {
            label: "5%",
            height: "7.69%",
          },
          {
            label: "5%",
            height: "7.69%",
          },
          {
            label: "5%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
          {
            label: "1%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
          {
            label: "1%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
          {
            label: "3%",
            height: "7.69%",
          },
          {
            label: "3%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
        ],
      },
      {
        width:'300px',
        height: "80px",
        children: [
          {
            label: "内容维度层面，可以采用深度学习、自然语言处理等技术对数据的描述等进行向量化表示，同时结合相似度计算，根据相似度阈值评估数据内容质量水平",
            height: "7.69%",
          },
          {
            label: "数据集格式符合自定义规范1分，若无0分；数据格式符合国标GB/T19488.1中5.5.3的规定",
            height: "7.69%",
          },
          {
            label: "数据为一手数据或者官方数据1分，若无0分",
            height: "7.69%",
          },
          {
            label: "数据格式过程中保持一致1分，若无0分",
            height: "7.69%",
          },
          {
            label: "多位标注者之间的一致性",
            height: "7.69%",
          },
          {
            label: "提供统一的数据定义与数据编码1分，模糊定义或者错误定义0分",
            height: "7.69%",
          },
          {
            label: "数据延迟 = 数据查询时间点 - 数据最后更新时间点",
            height: "7.69%",
          },
          {
            label: "数据资源最近更新日期与数据信息采集日期之间的天数之差",
            height: "7.69%",
          },
          {
            label: "根据业务需求和数据特点，设定数据的有效期阈值，检查数据是否在有效期内",
            height: "7.69%",
          },
          {
            label: "数据空值率 = (缺失或为空的记录数 / 总记录数) × 100%",
            height: "7.69%",
          },
          {
            label: "数据重复率 = (重复值数量 / 总数据量) × 100%",
            height: "7.69%",
          },
          {
            label: "数据集中的字段都被正确赋值1分，若无0分",
            height: "7.69%",
          },
          {
            label: "数据集中每条记录都包含必要字段1分，若无0分",
            height: "7.69%",
          },
        ],
      },
    ],
  },
  {
    label: "规模属性",
    backgroundColor: "#FEF1D3",
    data: [
      {
        label: "规模属性",
        notes: "数据的质量会随着关联数据的规模增加而增加",
        characteristic: "(量大)",
        width:'100px',
        height: "80px",
      },
      {
        label: "数据的质量会随着关联数据的规模增加而增加",
        width:'100px',
        height: "80px",
      },
      {
        label: "25%",
        width:'100px',
        height: "80px",
      },
      {
        width:'100px',
        children: [
          {
            label: "数量级",
            height: "160px",
          },
          {
            label: "多样性",
            height: "33.33%",
          },
          {
            label: "全面性",
            height: "33.33%",
          },
        ],
      },
      {
        width:'100px',
        children: [
          {
            label: "10%",
            height: "160px",
          },
          {
            label: "9%",
            height: "33.33%",
          },
          {
            label: "6%",
            height: "33.33%",
          },
        ],
      },
      {
        width:'100px',
        height: "80px",
        children: [
          {
            label: "数据总量",
            height: "16.66%",
          },
          {
            label: "数据增长趋势",
            height: "16.66%",
          },
          {
            label: "数据类型",
            height: "16.66%",
          },
          {
            label: "数据分布",
            height: "16.66%",
          },
          {
            label: "数据领域",
            height: "16.66%",
          },
          {
            label: "数据主题",
            height: "16.66%",
          },
        ],
      },
      {
        width:'300px',
        height: "80px",
        children: [
          {
            label: "数据集是否包含了大量的数据点或者数据记录",
            height: "16.66%",
          },
          {
            label: "数据的产生与更新速度",
            height: "16.66%",
          },
          {
            label: "数据是否为多模态数据",
            height: "16.66%",
          },
          {
            label: "数据在是否分布在不同值或者类别上",
            height: "16.66%",
          },
          {
            label: "数据集是否涵盖了各个应用领域",
            height: "16.66%",
          },
          {
            label: "数据集是否提供了各个业务主题的数据内容",
            height: "16.66%",
          },
        ],
      },
      {
        width:'100px',
        height: "80px",
        children: [
          {
            label: "5%",
            height: "16.66%",
          },
          {
            label: "5%",
            height: "16.66%",
          },
          {
            label: "6%",
            height: "16.66%",
          },
          {
            label: "3%",
            height: "16.66%",
          },
          {
            label: "3%",
            height: "16.66%",
          },
          {
            label: "3%",
            height: "16.66%",
          },
        ],
      },
      {
        width:'300px',
        height: "80px",
        children: [
          {
            label: "数据集占据硬盘空间的大小",
            height: "16.66%",
          },
          {
            label: "增长速度=一定时间间隔内的增长数量/总数量*100%",
            height: "16.66%",
          },
          {
            label: "数据种类多元化1分，若无不是0分",
            height: "16.66%",
          },
          {
            label: "分布一致性的常用度量方法包括基于样本加权的度量方法，基于假设检验的度量方法和基于各种度量函数的度量方法等。其中，基于KL距离度量函数的度量方法",
            height: "16.66%",
          },
          {
            label: "数据集覆盖多个应用领域1分，若无0分",
            height: "16.66%",
          },
          {
            label: "数据集提供多个业务主题1分，若无0分",
            height: "16.66%",
          },
        ],
      },
    ],
  },
  {
    label: "价值属性",
    backgroundColor: "#FEE3D3",
    data: [
      {
        label: "价值属性",
        characteristic: "(价高)",
        width:'100px',
        height: "80px",
      },
      {
        label: "数据集应用于具体场景产生的价值",
        width:'100px',
        height: "80px",
      },
      {
        label: "25%",
        width:'100px',
        height: "80px",
      },
      {
        width:'100px',
        children: [
          {
            label: "效用性",
            height: "240px",
          },
          {
            label: "经济性",
            height: "25%",
          },
          {
            label: "场景性",
            height: "37.5%",
          },
        ],
      },
      {
        width:'100px',
        children: [
          {
            label: "8%",
            height: "240px",
          },
          {
            label: "7%",
            height: "25%",
          },
          {
            label: "10%",
            height: "37.5%",
          },
        ],
      },
      {
        width:'100px',
        height: "80px",
        children: [
          {
            label: "易用性",
            height: "12.5%",
          },
          {
            label: "可理解性",
            height: "12.5%",
          },
          {
            label: "可访问性",
            height: "12.5%",
          },
          {
            label: "市场收益",
            height: "12.5%",
          },
          {
            label: "适配成本",
            height: "12.5%",
          },
          {
            label: "场景多元性",
            height: "12.5%",
          },
          {
            label: "业务适应性",
            height: "12.5%",
          },
          {
            label: "应用可行性",
            height: "12.5%",
          },
        ],
      },
      {
        width:'300px',
        height: "80px",
        children: [
          {
            label: "数据集可供用户使用的程度度量",
            height: "12.5%",
          },
          {
            label: "被使用者理解的程度",
            height: "12.5%",
          },
          {
            label: "数据在需要应用时的可获取性",
            height: "12.5%",
          },
          {
            label: "数据集在应用场景中产生的收益度量",
            height: "12.5%",
          },
          {
            label: "数据集在应用场景中产生的成本度量",
            height: "12.5%",
          },
          {
            label: "数据集应用于单一场景还是多场景",
            height: "12.5%",
          },
          {
            label: "数据集适用于不同业务场景和需求的能力度量",
            height: "12.5%",
          },
          {
            label: "数据在实际业务场景中的应用效果",
            height: "12.5%",
          },
        ],
      },
      {
        width:'100px',
        height: "80px",
        children: [
          {
            label: "3%",
            height: "12.5%",
          },
          {
            label: "3%",
            height: "12.5%",
          },
          {
            label: "2%",
            height: "12.5%",
          },
          {
            label: "4%",
            height: "12.5%",
          },
          {
            label: "3%",
            height: "12.5%",
          },
          {
            label: "3%",
            height: "12.5%",
          },
          {
            label: "3%",
            height: "12.5%",
          },
          {
            label: "4%",
            height: "12.5%",
          },
        ],
      },
      {
        width:'300px',
        height: "80px",
        children: [
          {
            label: "数据集主题分类科学合理、主题无交叉为1分，分类模糊0分;数据集能可视化呈现为1分，不能可视化呈现为 0 分数据集有可供检索的标签1分，若无0分",
            height: "12.5%",
          },
          {
            label: "数据集有无相关简介或者解释说明",
            height: "12.5%",
          },
          {
            label: "数据在需要时是否方便获取",
            height: "12.5%",
          },
          {
            label: "数据集在收集、治理和应用中是否产生损耗以及产生的成本",
            height: "12.5%",
          },
          {
            label: "数据集在收集、治理和应用中是否能够带来收益",
            height: "12.5%",
          },
          {
            label: "数据集跨场景应用的可能性",
            height: "12.5%",
          },
          {
            label: "数据在场景应用中的适应程度",
            height: "12.5%",
          },
          {
            label: "数据在实际业务场景中的应用效果",
            height: "12.5%",
          },
        ],
      },
    ],
  },
]);
</script>

<style scoped lang="scss">
.nScore {
  padding: 0 20px;
  padding-bottom:80px;
  .scoreData {
    display: flex;
    justify-content:center;
    flex-wrap: wrap;
    width: 100%;
    margin-top:10px;
    .s{
      .scoreUl {
        li {
          font-weight:550;
          padding:7px 0;
          border-top:1px solid #000;
        }
      }
    }
    .scoreUl {
      display: flex;
      border-left: 1px solid #000;
      li {
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          justify-content: center;
        }
        .characteristic {
          margin-top: 5px;
          margin-left: -5px;
        }
      }
      .vItem{
        li{
        }
        li:last-child{
          border-bottom:0;
        }
      }
    }
  }
  .saveBtn{
    width: 180px;
    height: 45px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #0091FF;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #0091FF;
    line-height: 25px;
    letter-spacing: 2px;
    text-align: left;
    font-style: normal;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:50px auto;
    cursor:pointer;
  }
}
</style>
